<template>
  <PageWrapDrawer :show="show" :isUpdate="true" 
  @success="onSubmit"
  @on-drawer-close="onClose">
    <Form name="basic"
          :model="insideData.data"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          layout="horizontal"
    >
      <Row>
        <Col span="12">
          <FormItem label="组织编码" name="code" v-bind="validateInfos['data.code']">
            <a-input v-model:value="insideData.data.code"/>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="组织名称" name="name" v-bind="validateInfos['data.name']">
            <a-input v-model:value="insideData.data.name"/>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="区域">
            <Cascader v-model:value="areaRef"
            expandTrigger="click"
            :field-names="{label: 'name', value: 'code', children: 'children'}"
            :options="AreaList"
            :show-search="{filter}"
            @change="onChange"
            />
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="可用" name="enable">
            <RadioGroup v-model:value="insideData.data.enable">
              <Radio :value="1">启用</Radio>
              <Radio :value="0">禁用</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="联系人" name="person">
            <a-input v-model:value="insideData.data.person"/>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="联系电话" name="phone">
            <a-input v-model:value="insideData.data.phone"/>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="办公地址" name="officeAddress">
            <a-input v-model:value="insideData.data.officeAddress"/>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="注册地址" name="registerAddress">
            <a-input v-model:value="insideData.data.registerAddress"/>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="备注" name="memo">
            <a-textarea v-model:value="insideData.data.memo" placeholder="说点什么..."/>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </PageWrapDrawer>
</template>
<script lang="ts" name="orgDrawer" setup>
import {reactive, ref, toRaw, watchPostEffect} from 'vue';
import {PageWrapDrawer} from '/@/components/PageWrapDrawer'
import {create, update,} from '/@/api/admin/org';
import {AreaList} from '/@/utils/data/area';
import {
  Form, FormItem,
  Row, Col,
  Radio, RadioGroup,
  Cascader, 
} from 'ant-design-vue';
import __ from 'lodash-es';
import { ShowSearchType } from 'ant-design-vue/lib/vc-cascader';

const emit = defineEmits(['on-success', 'on-drawer-close'])
const props = defineProps({
    show: Boolean,
    isUpdate: Boolean,
    row: {type: [Object, null] as PropType<Object | null>, default: null,},
})

const useForm = Form.useForm;
const areaRef = ref([])
const insideData = reactive({
  data: {
    id: null,
    code: '',
    name: '',
    enable: 1,
    area: '',
    person: '',
    phone: '',
    officeAddress: '',
    registerAddress: '',
    memo: '',
  }
});
const rulesRef = reactive({
  'data.name': [
    {required: true, message: '请输入组织名称',},
  ],
  'data.code': [
    {required: true, message: '请输入组织编码',},
  ] as unknown,
});
watchPostEffect(async () => {
  let v1 = props.row as any
  if (v1) {
    insideData.data = {...v1}
    if (v1.area) {
      areaRef.value = v1.area.split(',')
    }
  }
})

const {resetFields, validate, validateInfos} = useForm(insideData, rulesRef, {
  onValidate: (...args) => {
  },
});

const filter: ShowSearchType['filter'] = (inputValue, path) => {
  return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};

const onChange = (value:any) => {
  if (value) {
    insideData.data.area = value.toString()
  } else {
    insideData.data.area = ''
  }
}

const onSubmit = () => {
  validate()
    .then(async () => {
      let data = toRaw(insideData.data)
      if (props.isUpdate) {
        await update(data).then(() => {
          onClose()
        })
      } else {
        await create(data).then(() => {
          onClose()
        })
      }
      emit('on-success')
    }).catch(err => {
    console.log('error-----', err);
  });
}

const onClose = () => {
  areaRef.value = []
  Object.assign(insideData, {data: {}});
  resetFields();
  emit('on-drawer-close');
};

</script>
